<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- Viewport metatags -->
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<!-- iOS webapp metatags -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!-- iOS webapp icons -->
<link rel="apple-touch-icon" href="touch-icon-iphone.html" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.html" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-retina.html" />

<!-- CSS Reset -->
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
<!--  Fluid Grid System -->
<link rel="stylesheet" type="text/css" href="css/fluid.css" media="screen" />
<!-- Theme Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/dandelion.theme.css" media="screen" />
<!--  Main Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/dandelion.css" media="screen" />
<!-- Demo Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/demo.css" media="screen" />

<!-- jQuery JavaScript File -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<!-- jQuery-UI JavaScript Files -->
<script type="text/javascript" src="jui/js/jquery-ui-1.8.20.min.js"></script>
<script type="text/javascript" src="jui/js/jquery.ui.timepicker.min.js"></script>
<script type="text/javascript" src="jui/js/jquery.ui.touch-punch.min.js"></script>
<link rel="stylesheet" type="text/css" href="jui/css/jquery.ui.all.css" media="screen" />

<!-- Plugin Files -->

<!-- FileInput Plugin -->
<script type="text/javascript" src="js/jquery.fileinput.js"></script>
<!-- Placeholder Plugin -->
<script type="text/javascript" src="js/jquery.placeholder.js"></script>
<!-- Mousewheel Plugin -->
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<!-- Scrollbar Plugin -->
<script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>
<!-- Tooltips Plugin -->
<script type="text/javascript" src="plugins/tipsy/jquery.tipsy-min.js"></script>
<link rel="stylesheet" href="plugins/tipsy/tipsy.css" />

<!-- Syntax Highlighter, depends on google prettify -->
<script type="text/javascript" src="plugins/syntaxhighlighter/prettify/prettify.min.js"></script>
<link rel="stylesheet" href="plugins/syntaxhighlighter/prettify/prettify.min.css" media="screen" />

<script type="text/javascript" src="plugins/syntaxhighlighter/jquery.syntaxhighlighter.min.js"></script>
<link rel="stylesheet" href="plugins/syntaxhighlighter/styles/style.min.css" media="screen" />
<link rel="stylesheet" href="plugins/syntaxhighlighter/styles/theme-balupton.css" media="screen" />
<link rel="stylesheet" href="plugins/syntaxhighlighter/styles/theme-google.css" media="screen" />

<!-- Demo JavaScript Files -->
<script type="text/javascript" src="js/demo/demo.typography.js"></script>

<!-- Core JavaScript Files -->
<script type="text/javascript" src="js/core/dandelion.core.js"></script>

<!-- Customizer JavaScript File (remove if not needed) -->
<script type="text/javascript" src="js/core/dandelion.customizer.js"></script>

<title>Dandelion Admin - Typography</title>

</head>

<body>

	<!-- Dandelion Customizer (remove if not needed) -->
    <div id="da-customizer">
    	<div id="da-customizer-content">
        	<ul>
            	<li>
                	<span class="da-customizer-title">Background Pattern</span>
                    <span id="da-customizer-body-bg"></span>
                </li>
                <li>
                	<span>Header Pattern</span>
                    <span id="da-customizer-header-bg"></span>
                </li>
                <li>
                	<span>
                    	Layout
                        <span title="This functionality can only provide you the CSS for background and header patterns. Instructions to switch between fixed or fluid layout can be found in the documentation." class="da-tooltip-w da-customizer-tooltip">
                    		[?]
                        </span>
                    </span>
                    <ul id="da-customizer-layouts" class="clearfix">
                    	<li>
                        	<input type="radio" id="da-customizer-fluid" name="da-layout" checked="checked" />
                        	<label for="da-customizer-fluid">Fluid</label>
                        </li>
                    	<li>
                        	<input type="radio" id="da-customizer-fixed" name="da-layout" />
                            <label for="da-customizer-fixed">Fixed</label>
                        </li>
                    </ul>
                </li>
            </ul>
            <div id="da-customizer-button">
            	<button class="da-button red">Get CSS</button>
            </div>
        </div>
        <span id="da-customizer-pulldown"></span>
    </div>
    
	<!-- Main Wrapper. Set this to 'fixed' for fixed layout and 'fluid' for fluid layout' -->
	<div id="da-wrapper" class="fluid">
    
        <!-- Header -->
        <div id="da-header">
        
        	<div id="da-header-top">
                
                <!-- Container -->
                <div class="da-container clearfix">
                    
                    <!-- Logo Container. All images put here will be vertically centere -->
                    <div id="da-logo-wrap">
                        <div id="da-logo">
                            <div id="da-logo-img">
                                <a href="dashboard.html">
                                    <img src="images/logo.png" alt="Dandelion Admin" />
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Header Toolbar Menu -->
                    <!-- Header Toolbar Menu -->
                    <div id="da-header-toolbar" class="clearfix">
                        <div id="da-user-profile">
                            <div id="da-user-avatar">
                                <img src="images/pp.jpg" alt="" />
                            </div>
                            <div id="da-user-info">
                                John Doe
                                <span class="da-user-title">Creative Director</span>
                            </div>
                            <ul class="da-header-dropdown">
                                <li class="da-dropdown-caret">
                                    <span class="caret-outer"></span>
                                    <span class="caret-inner"></span>
                                </li>
                                <li class="da-dropdown-divider"></li>
                                <li><a href="dashboard.html">Dashboard</a></li>
                                <li class="da-dropdown-divider"></li>
                                <li><a href="#">Profile</a></li>
                                <li><a href="#">Settings</a></li>
                                <li><a href="#">Change Password</a></li>
                            </ul>
                        </div>
                        <div id="da-header-button-container">
                        	<ul>
                            	<li class="da-header-button notif">
                                	<span class="da-button-count">32</span>
                                	<a href="#">Notifications</a>
                                    <ul class="da-header-dropdown">
                                        <li class="da-dropdown-caret">
                                            <span class="caret-outer"></span>
                                            <span class="caret-inner"></span>
                                        </li>
                                        <li>
                                        	<span class="da-dropdown-sub-title">Notifications</span>
                                        	<ul class="da-dropdown-sub">
                                                <li class="unread">
                                                    <a href="#">
                                                        <span class="message">
                                                            Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                                        </span>
                                                        <span class="time">
                                                            January 21, 2012
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="unread">
                                                    <a href="#">
                                                        <span class="message">
                                                            Lorem ipsum dolor sit amet
                                                        </span>
                                                        <span class="time">
                                                            January 21, 2012
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="read">
                                                    <a href="#">
                                                        <span class="message">
                                                            Lorem ipsum dolor sit amet
                                                        </span>
                                                        <span class="time">
                                                            January 21, 2012
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="read">
                                                    <a href="#">
                                                        <span class="message">
                                                            Lorem ipsum dolor sit amet
                                                        </span>
                                                        <span class="time">
                                                            January 21, 2012
                                                        </span>
                                                    </a>
                                                </li>
                                            </ul>
                                            <a class="da-dropdown-sub-footer">
                                            	View all notifications
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            	<li class="da-header-button message">
                                	<span class="da-button-count">5</span>
                                	<a href="#">Messages</a>
                                    <ul class="da-header-dropdown">
                                        <li class="da-dropdown-caret">
                                            <span class="caret-outer"></span>
                                            <span class="caret-inner"></span>
                                        </li>
                                        <li>
                                        	<span class="da-dropdown-sub-title">Messages</span>
                                        	<ul class="da-dropdown-sub">
                                                <li class="unread">
                                                    <a href="#">
                                                        <span class="message">
                                                            Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                                        </span>
                                                        <span class="time">
                                                            January 21, 2012
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="unread">
                                                    <a href="#">
                                                        <span class="message">
                                                            Lorem ipsum dolor sit amet
                                                        </span>
                                                        <span class="time">
                                                            January 21, 2012
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="read">
                                                    <a href="#">
                                                        <span class="message">
                                                            Lorem ipsum dolor sit amet
                                                        </span>
                                                        <span class="time">
                                                            January 21, 2012
                                                        </span>
                                                    </a>
                                                </li>
                                                <li class="read">
                                                    <a href="#">
                                                        <span class="message">
                                                            Lorem ipsum dolor sit amet
                                                        </span>
                                                        <span class="time">
                                                            January 21, 2012
                                                        </span>
                                                    </a>
                                                </li>
                                            </ul>
                                            <a class="da-dropdown-sub-footer">
                                            	View all messages
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            	<li class="da-header-button logout">
                                	<a href="index.html">Logout</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                                    
                </div>
            </div>
            
            <div id="da-header-bottom">
                <!-- Container -->
                <div class="da-container clearfix">
                
                	<div id="da-search">
                    	<form>
                        	<input type="text" placeholder="Search..." />
                        </form>
                    </div>
                	
                    <!-- Breadcrumbs -->
                    <div id="da-breadcrumb">
                        <ul>
                            <li><a href="dashboard.html"><img src="images/icons/black/16/home.png" alt="Home" />Dashboard</a></li>
                            <li><span>Layout and Typography</span></li>
                            <li class="active"><span>Typography</span></li>
                        </ul>
                    </div>
                    
                </div>
            </div>
        </div>
    
        <!-- Content -->
        <div id="da-content">
            
            <!-- Container -->
            <div class="da-container clearfix">
            
                <!-- Sidebar -->
                <div id="da-sidebar-separator"></div>
                <div id="da-sidebar">
                
                    <!-- Main Navigation -->
                    <div id="da-main-nav" class="da-button-container">
                        <ul>
                            <li>
                            	<a href="dashboard.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/home.png" alt="Dashboard" />
                                    </span>
                                	Dashboard
                                </a>
                            </li>
                            <li>
                            	<a href="#">
                                	<!-- Nav Notification -->
                                    <span class="da-nav-count">32</span>
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/graph.png" alt="Charts" />
                                    </span>
                                	Statistics and Charts
                                </a>
                                <ul class="closed">
                                	<li><a href="statistic.html">Statistic Widgets</a></li>
                                	<li><a href="charts.html">Chart Gallery</a></li>
                                </ul>
                            </li>
                            <li>
                            	<a href="calendar.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/day_calendar.png" alt="Calendar" />
                                    </span>
                                	Calendar
                                </a>
                            </li>
                            <li>
                            	<a href="file.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/file_cabinet.png" alt="File Handling" />
                                    </span>
                                	File Handling
                                </a>
                            </li>
                            <li>
                            	<a href="table.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/table_1.png" alt="Table" />
                                    </span>
                                	Table
                                </a>
                            </li>
                            <li>
                            	<a href="#">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/create_write.png" alt="Form" />
                                    </span>
                                	Form
                                </a>
                                <ul>
                                	<li><a href="form-layouts.html">Layouts</a></li>
                                	<li><a href="form-elements.html">Elements</a></li>
                                	<li><a href="form-validation.html">Validation</a></li>
                                </ul>
                            </li>
                            <li>
                            	<a href="ui.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/settings.png" alt="" />
                                    </span>
                                    UI Elements
                                </a>
                            </li>
                            <li>
                            	<a href="widgets.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/cog_4.png" alt="Widgets" />
                                    </span>
                                    Widgets
                                </a>
                            </li>
                            <li class="active">
                            	<a href="#">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/word_documents_1.png" alt="Layout and Typography" />
                                    </span>
                                    Layout and Typography
                                </a>
                                <ul class="closed">
                                	<li><a href="grids.html">Grids and Panels</a></li>
                                	<li><a href="typography.html">Typography</a></li>
                                </ul>
                            </li>
                            <li>
                            	<a href="gallery.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/images_2.png" alt="Gallery" />
                                    </span>
                                    Gallery
                                </a>
                            </li>
                            <li>
                            	<a href="error.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/alert.png" alt="Error Pages" />
                                    </span>
                                    Error Page (404)
                                </a>
                            </li>
                            <li>
                            	<a href="icons.html">
                                	<!-- Icon Container -->
                                	<span class="da-nav-icon">
                                    	<img src="images/icons/black/32/pacman.png" alt="Icons" />
                                    </span>
                                    Icons
                                </a>
                            </li>
                        </ul>
                    </div>
                    
                </div>
                
                <!-- Main Content Wrapper -->
                <div id="da-content-wrap" class="clearfix">
                
                	<!-- Content Area -->
                	<div id="da-content-area">
                    
                    	<div class="grid_1">
                        	<div class="da-panel-widget">
                            	<h1>Heading 1</h1>
                            	<h2>Heading 2</h2>
                            	<h3>Heading 3</h3>
                            	<h4>Heading 4</h4>
                            	<h5>Heading 5</h5>
                            	<h6>Heading 6</h6>
                            </div>
                        </div>
                        
                    	<div class="grid_3">
                        	<div class="da-panel-widget">
                            	<h2>Paragraph Text</h2>
                                <p><em>Lorem ipsum dolor sit amet</em>, <a href="#">consectetur adipiscing elit</a>. Quisque rutrum, libero ut ultricies pulvinar, lorem velit sollicitudin enim, sed <a href="#">faucibus</a> tortor lectus et sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Vivamus viverra fringilla sem, at porttitor justo scelerisque id. Mauris aliquet ullamcorper velit, eu elementum dolor consequat nec. Morbi ante sem, euismod ut accumsan sit amet, venenatis ac dui. <a href="#">Suspendisse fringilla</a> dui et purus sollicitudin fermentum. Sed facilisis viverra turpis, id cursus lectus varius ultrices. Quisque tristique ligula leo. Sed cursus, nisi dignissim auctor auctor, neque felis consequat mi, eu interdum justo urna ut lectus. Suspendisse ultricies, erat vel convallis aliquet, lacus tellus ornare felis, vitae commodo mi lacus in libero. Donec viverra, nisl at vestibulum mattis, massa erat porta dolor, eu aliquam felis diam non ante. <a href="#">Phasellus mollis</a> <strong>nisi rutrum turpis egestas vel</strong> semper sapien sollicitudin.</p>
                            </div>
                        </div>
                        
                        <div class="clear"></div>
                        
                    	<div class="grid_1">
                        	<div class="da-panel-widget">
                            	<h2>Ordered List</h2>
                                <ol>
                                	<li>Apple</li>
                                    <li>Ananas</li>
                                    <li>Banana</li>
                                    <li>Cherry</li>
                                    <li>Durian</li>
                                    <li>Grape</li>
                                </ol>
                            </div>
                        </div>
                        
                    	<div class="grid_1">
                        	<div class="da-panel-widget">
                            	<h2>Unordered List</h2>
                                <ul>
                                	<li>Apple</li>
                                    <li>Ananas</li>
                                    <li>Banana</li>
                                    <li>Cherry</li>
                                    <li>Durian</li>
                                    <li>Grape</li>
                                </ul>
                            </div>
                        </div>
                        
                    	<div class="grid_2">
                        	<div class="da-panel-widget">
                            	<h2>Block Quote</h2>
                                <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in enim nisi. Aenean faucibus dictum ante nec lacinia. Phasellus quis imperdiet lectus. Class aptent taciti.</blockquote>
                            </div>
                        </div>
                        
                    	<div class="grid_4">
                        	<div class="da-panel-widget">
                            	<h2>Code with Syntax Highlighting</h2>
                                <p>The following is a code block, highlighted using <a href="http://code.google.com/p/google-code-prettify/" target="_blank">Google Prettify</a> by using SyntaxHighlighter plugin (<a href="https://github.com/balupton/jquery-syntaxhighlighter" target="_blank">https://github.com/balupton/jquery-syntaxhighlighter</a>)</p>
<pre class="language-javascript">
var o = this;

this._startCounting(10, true);
o.data.raphael.path()
    .attr({arc: [60, 60, 60, o.data.startAngle, o.data.startAngle], fill: o.config.fillColor})
    .animate({arc: [60, 60, 60, o.data.startAngle, o.data.endAngle], fill: o.config.fillColor}, 
        o.config.duration, o.config.easing, function() {
        if(o.data.endAngle >= 360) {
            o.data.raphael.clear();
            o.data.raphael.circle(60, 60, 60).attr({
                fill : o.config.fillColor, 
                stroke : 'none'
            });
        }
    });
</pre>
                            </div>
                        </div>
                                                
                    </div>
                    
                </div>
                
            </div>
            
        </div>
        
        <!-- Footer -->
        <div id="da-footer">
        	<div class="da-container clearfix">
            	<p>Copyright 2012. Dandelion Admin. All Rights Reserved.
            </div>
        </div>
        
    </div>
    
</body>

</html>
